<template>
  <svg :viewBox="iconItem.viewBox" :t="iconItem.t" :p-id="iconItem.pid" class="icon" version="1.1"
    xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
    <path v-for="(item,index) in iconItem.paths" :key="index" :p-id="item.pid" :d="item.d" :fill="color || iconItem.fill || '#ccc'" />
  </svg>

  <!-- <svg t="1745830551293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="6363" width="64" height="64">
    <path
      d="M512 640H128v277.333333a21.333333 21.333333 0 0 1-42.666667 0V127.829333C85.333333 104.362667 104.384 85.333333 127.850667 85.333333h362.922666A63.936 63.936 0 0 1 554.666667 149.12V192h320.128A63.936 63.936 0 0 1 938.666667 255.786667v427.093333A63.872 63.872 0 0 1 874.794667 746.666667H575.872A63.936 63.936 0 0 1 512 682.88V640zM128 128v469.333333h384V149.12a21.269333 21.269333 0 0 0-21.226667-21.12H128z m746.794667 106.666667H554.666667v448.213333c0 11.562667 9.557333 21.12 21.205333 21.12h298.922667a21.205333 21.205333 0 0 0 21.205333-21.12V255.786667a21.269333 21.269333 0 0 0-21.205333-21.12z"
      fill="#3D3D3D" p-id="6364"></path>
  </svg> -->

</template>

<script setup>
import { computed, toRefs } from 'vue'
import icons from './icons.json'


const props = defineProps({
  name: {
    type: String,
    default: '6364',
  },
  color: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '64',
  },
  height: {
    type: String,
    default: '64'
  }
})

const { name, color, ...otherProps } = toRefs(props)

const iconItem = computed(() => {
  const item = icons[name.value]
  if (!item) {
    return {
      pid:'7175',
      viewBox: '0 0 1024 1024',
      t: '1745832335176',
      fill:'#3D3D3D',
      paths:[
        {
          d:'M512 640H128v277.333333a21.333333 21.333333 0 0 1-42.666667 0V127.829333C85.333333 104.362667 104.384 85.333333 127.850667 85.333333h362.922666A63.936 63.936 0 0 1 554.666667 149.12V192h320.128A63.936 63.936 0 0 1 938.666667 255.786667v427.093333A63.872 63.872 0 0 1 874.794667 746.666667H575.872A63.936 63.936 0 0 1 512 682.88V640zM128 128v469.333333h384V149.12a21.269333 21.269333 0 0 0-21.226667-21.12H128z m746.794667 106.666667H554.666667v448.213333c0 11.562667 9.557333 21.12 21.205333 21.12h298.922667a21.205333 21.205333 0 0 0 21.205333-21.12V255.786667a21.269333 21.269333 0 0 0-21.205333-21.12z',
          pid:'7176'
        }
      ]
    }
  }
  return {
    viewBox: item.viewBox,
    pid:item.pid,
    t: item.t,
    paths:item.paths,
    fill:item.fill,
  }
})
</script>

<style scoped>
.icon {
  /* width: 1.2rem;
  height: 1.2rem; */
  display: inline-block;
  vertical-align: middle;
}
</style>